<template>
  <div class="tree">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content">
          <el-input
            style="margin-bottom:10px;"
            placeholder="搜索用户"
            v-model="filterText">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-tree
            :data="groupData"
            show-checkbox
            node-key="id"
            ref="tree2"
            @check="choose"
            highlight-current
            :filter-node-method="filterNode"
            :props="defaultProps"
            :default-checked-keys="checkedKeys"
          >
          </el-tree>
        </div>
      </el-col>

      <el-col :span="16">
        <div class="grid-content">
          <!-- <span class="fr" style="cursor:pointer" @click="clear">清空</span> -->
          <h5>{{title}}人数共计{{members.length}}人</h5>
          <el-row :gutter="20" class="gao">
            <el-col :span="6" v-for="(item,index) in members" :key='index'>
              <div class="grid-content bg-purple">
                <span>{{item.name}}</span>
                 <i class="el-icon-close fr" @click="remove(index)"></i>
              </div>
            </el-col>

          </el-row>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "DataTree",
    props: ['title', 'groupData', 'memberArray'],
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      },
      groupData: {
        deep: true,
        handler(newVal) {
          console.log('new group data:::::', newVal)
          this.checkedKeys = this.getCheckedKeys()
          if (this.$refs.tree2) {
            this.$refs.tree2.setCheckedKeys(this.checkedKeys)
          }
        }
      }
    },
    data() {
      return {
        filterText: '',
        total: 120,
        members: [],
        defaultProps: {
          children: 'users',
          label: 'name'
        },
        checkedKeys: []
      }
    },
    created() {
      if (this.memberArray) {
        this.members = this.memberArray
      }
      this.checkedKeys = this.getCheckedKeys()
    },
    methods: {
      resignDataKeys() {
        this.groupData.forEach(group => {
          group.users.forEach(user => {
            if (!isNaN(user.id)) {
              user.id = `${group.id}_${user.id}`
            }
          })
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      getCheckedKeys() {
        this.resignDataKeys()
        let keys = []
        this.groupData.forEach(group => {
          this.members.forEach(m => {
            let id = `${group.id}_${m.id}`
            if (!!group.users.find(user => user.id === id)) {
              keys.push(id)
            }
          })
        })

        return keys
      },
      choose(node, checkedItems) {

        let memberArray = checkedItems.checkedNodes.filter(item => !item.users)

        let mode = null
        let removeMembers = {}
        if (this.checkedKeys.length > memberArray.length) {
          // 有新项目取消勾选
          mode = 'remove'
          this.checkedKeys.forEach(key => {
            if (!memberArray.find(m => m.id === key)) {
              removeMembers['' + key.split('_')[1]] = true
            }
          })
        }

        let members = []
        let existMembers = {};
        memberArray.forEach(m => {
          let idAry = m.id.split('_')
          if (!existMembers['m' + idAry[1]]) {
            existMembers['m' + idAry[1]] = true
            members.push({
              ...m,
              id: idAry[1]
            })
          }
        })

        // 如果是取消打勾，要把对应的项目全部清除掉
        if (mode = 'remove') {
          let finalMembers = []
          members.forEach(m => {
            if (!removeMembers['' + m.id]) {
              finalMembers.push(m)
            }
          })
          this.members = finalMembers
        } else {
          this.members = members
        }
console.log('choose member::::::', this.members)
        this.checkedKeys = this.getCheckedKeys()
        if (this.$refs.tree2) {
          this.$refs.tree2.setCheckedKeys(this.checkedKeys)
        }
      },
      remove(index) {
        this.members.splice(index, 1)
        this.checkedKeys = this.getCheckedKeys()
        if (this.$refs.tree2) {
          this.$refs.tree2.setCheckedKeys(this.checkedKeys)
        }
      }
    }
  }
</script>

<style scoped>
  .gao {
    height: 270px;
    overflow-y: scroll;
  }

  .el-tree {
    /* max-height:100px; */
    overflow-y: scroll;
    border-top: 1px solid #dddddd;

  }

  .bg-purple {
    background-color: #f0f0f0;
    border-radius: 2px;
    border: solid 1px #dddddd;
    margin: 4px 0px;
    padding: 0px 6px;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    margin-right: 10px;
  }

  .bg-purple .el-icon-close {
    position: relative;
    top: 10px;

  }
</style>
